<template>
  <view class="content">
    <view class="nav-bar_1 flex-row">
    	<image class="icon_1" referrerpolicy="no-referrer" src="https://lanhu.oss-cn-beijing.aliyuncs.com/psx8uw2gjapajt3duyqnxhbpphjtnzm8ulb06d3b54-22a7-44ba-af0e-ab818b134945" />
    	<text class="text_1">实名认证</text>
    </view>
    <view class="nav">
      <view>
        <image src="/static/you.png" style="width: 43rpx;height: 44rpx;margin-left: 56rpx;margin-right: 18rpx;"></image>
      </view>
      <view class="navText">您尚未实名认证。根据《中华人民共和国电子签名法》要求需要签署方身份真实，请根据以下提示完成实名认证。</view>
    </view>
    <view class="formInput">
      <view class="uni-form-item ">
        <input class="uni-input" focus placeholder="设置登录账号（手机号)" v-model="phone" />
      </view>
      <view class="uni-form-item ">
        <input class="uni-input" type="password" placeholder="设置登录密码" v-model="password" />
      </view>
      <view class="uni-form-item " style="display: flex;">
        <input class="uni-input" focus placeholder="图形验证码" v-model="img" />
        <view class="picture" @click="open">图形验证码</view>
      </view>
      <view class="uni-form-item " style="display: flex;">
        <input class="uni-input" focus placeholder="手机验证码" v-model="code" />
        <text style="color: #C8A556;" @click="getNoteInfo()"
          :style="cd!=''?'pointer-events: none;':''">{{cd}}手机验证码</text>
      </view>


      <view style="display: flex;align-items: center;margin-top: 40rpx;">
        <view :class="isAgreement?'or':''" @click="isAgreement=!isAgreement"
          style="margin-right: 10rpx;width: 40rpx;height: 25rpx;border-radius: 50%;border: #C8A556 1px solid;">
        </view>
        <view style="font-size: 26rpx;">本人已认真阅读，理解并同意《用户协议》《隐私协议》和《数字证书服务协议》</view>
      </view>
      <view class="renZheng">
        <view hover-class="navigator-hover" class="text_password">
          <button type="default" style="line-height: 86rpx;" @click="login()">进行认证</button>
        </view>
        <view class="login" @click="tologin()">已有账号 立即登录</view>

      </view>
      <uni-popup ref="popup" type="center" :animation="false">
        <view class="">
          <image :src="Image" mode=""></image>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
  import {
    checkMobile,
    checkPassword,
    checkCode
  } from '../../common/util/verify.js'
  export default {
    data() {
      return {
        title: 'shouye',
        cd: '',
        isAgreement: true,
        phone: '', //手机号
        password: '', //密码
        img: '', //图形
        code: '', //验证码
        imgCode: {}, //存储服务器图形验证
        noteCode: {}, //存储服务器短信验证
        orderNo: null, //认证的回调
        checkType:null,//1个人,2企业
      }
    },
    onShow() {
      //截取url字段
      var url = window.location.href;
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(url.indexOf("?") + 1, url.length);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
        }
      }
      this.checkType=theRequest.checkType
      uni.setStorageSync('checkType', this.checkType)

      if (theRequest.orderNo) {
        this.orderNo = theRequest.orderNo
        this.isattestation()
        // uni.redirectTo({  
        //   url:'../../subpkg/sign/sign'
        // })
      }
    },
    onLoad() {

    },
    methods: {
      // 密码登录
      tologin(){
        uni.navigateTo({
          url:'/pages/login/login'
        })
      },
      //认证回调
      async isattestation() {
        console.log('参数', this.orderNo)
        let res = await this.$http(`/app/fxqApi/authenticationNotify?orderNumber=${this.orderNo}`, 'post')
        console.log(res)
        if (res.data.code == 200) {
          let userType
          if(res.data.data.userType=="1"){
            userType=2
          }else if(res.data.data.userType=='2'){
            userType=1
          }
          uni.setStorageSync('checkType', userType)
          console.log('认证成功');
          let title ='认证成功'
          uni.$showMsg(title)
          uni.navigateTo({
            url: '/subpkg/sign/sign'
          })
        } else {
          let userType
          if(res.data.data.userType=="1"){
            userType=2
          }else if(res.data.data.userType=='2'){
            userType=1
          }
          uni.setStorageSync('checkType', userType)
          console.log('失败');
          let title = res.data.msg
          uni.$showMsg(title)
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      },
      //图形验证
      async open() {
        this.$refs.popup.open('center')
        let res = await this.$http('/code')
        if (res.data.code == 200) {
          this.imgCode = res.data
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 1500
          })
        }
      },
      //验证码
      async getNoteInfo() {
        //校验手机号
        let verifyResult = await checkMobile(this.phone)
        if (!verifyResult) {
          let title = '手机号有误!'
          uni.$showMsg(title)
        } else {
          //发送短信
          let param = {
            phone: this.phone
          }
          let res = await this.$http('/im/yunxin/getSmsCode', 'post', param)
          if (res.data.code == 200) {
            this.noteCode = res.data.data
			this.cd = 60
			//倒计时
			let interval = setInterval(() => {
			  this.cd--
			  if (this.cd == 0) {
			    console.log(1)
			    this.cd = ''
			    clearInterval(interval)
			  }
			}, 1000)
          } else {
            uni.showToast({
              title: res.data.msg,
			  icon:'none',
              duration: 1500
            })
          }

        
        }


      },
      //登录
      async login() {
        //校验手机号
        let verifyResult = await checkMobile(this.phone)
        //校验验证码
        let codeResult = await checkCode(this.code)
        //校验密码
        let passwordResult = await checkPassword(this.password)

        if (!this.isAgreement) {
          let title = '是否同意'
          uni.$showMsg(title)
        } else if (!verifyResult) {
          let title = '手机校验失败!'
          uni.$showMsg(title)
        } else if (!passwordResult) {
          let title = '密码校验失败'
          uni.$showMsg(title)
        } else if (this.img == '') {
          let title = '图形校验失败'
          uni.$showMsg(title)
        } else if (!codeResult) {
          let title = '验证码校验失败'
          uni.$showMsg(title)
        } else {
          let checkType=uni.getStorageSync("checkType");
          //发请求
          let param = {
            loginFrom: checkType||2, //1企业,2个人
            phone: this.phone, //手机号
            passwordStr: this.password, //密码
            verificationCode: this.code, //验证码
            imgCode: this.img, //校验
            verificationUUid: this.noteCode.uuid, //验证吗uuid
            imgUUid: this.imgCode.uuid //验证吗uuid
          }
          let res = await this.$http('/auth/loginByUserPhone', 'post', param)
          console.log(res)
          if (res.data.code == 200) {
            uni.setStorageSync('token', res.data.data)
            uni.navigateTo({
              url: '/subpkg/nameLogin/nameLogin'
            })
          } else {
            let title = res.data.msg
            uni.$showMsg(title)
         }
        }

      },
      close() {
        this.$refs.popup.close()
      }
    },
    computed: {
      Image() {
        let img = ''
        if (!this.imgCode.img) return
        img = "data:image/jpeg;base64," + this.imgCode.img
        return img
      }
    }
  }
</script>

<style scoped>
  .nav-bar_1 {
  	width: 750rpx;
  	height: 88rpx;
  	background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psibzwvvmvsjq5izg8qlco4tghk1kpoy2857ec875-314b-4896-bfcb-e4359239e06c) 100% no-repeat;
  	background-size: 100% 100%;
  }
  
  .icon_1 {
  	width: 20rpx;
  	height: 35rpx;
  	margin: 35rpx 0 0 31rpx;
  }
  
  .text_1 {
  	width: 146rpx;
  	height: 34rpx;
  	overflow-wrap: break-word;
  	color: rgba(255, 255, 255, 1);
  	font-size: 36rpx;
  	font-family: Adobe Heiti Std R;
  	text-align: left;
  	white-space: nowrap;
  	line-height: 24rpx;
  	margin: 37rpx 303rpx 0 250rpx;
  }
  .or {
    background-color: rgba(205, 173, 102, 1.000000);
  }

  .nav {
    width: 100%;
    height: 170rpx;
    background: #373737;
    display: flex;
    align-items: center;
    color: #FFFFFF;
  }

  .navText {
    font-size: 20rpx;
    font-family: SimHei;
    margin-right: 10rpx;
  }

  .iconfont {
    width: 43rpx;
    height: 44rpx;
    margin: 0 18rpx 0 25rpx;
  }

  .uni-input {
    width: 570rpx;
    height: 86rpx;
    background: #FFFFFF;
    border: 2rpx solid #C8A556;
    border-radius: 30rpx;
    padding-left: 20rpx;
    margin-top: 30rpx;
    color: #999999;
    font-size: 26rpx;
  }

  .formInput {
    padding: 52rpx 50rpx 0 91rpx;
  }

  .uni-form-item {
    position: relative;
    font-size: 26rpx;
  }

  .uni-form-item text {
    position: absolute;
    right: 56rpx;
    top: 57rpx;
  }

  .picture {
    box-sizing: border-box;
    position: absolute;
    line-height: 88rpx;
    text-align: center;
    color: #FFFFFF;
    width: 200rpx;
    height: 90rpx;
    background: #CDAD66;
    right: 19rpx;
    top: 31rpx;
    border-radius: 0 28rpx 30rpx 0;
  }

  /deep/.uni-checkbox-input {
    border-radius: 50%;
    width: 18px;
    height: 18px;
    background: #FFFFFF !important;
    border: 2rpx solid #C8A556;
  }

  /deep/uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
    border: 2rpx solid #C8A556;
    color: #C8A556 !important;
    font-size: 20rpx !important;
    background: #FFFFFF !important;
  }

  /deep/.uni-checkbox-input:hover {
    color: #C8A556 !important;
    border: 2rpx solid #C8A556;
    background: #FFFFFF !important;
  }

  /deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
    font-size: 32rpx;
    color: #C8A556;
    background: #FFFFFF !important;
  }

  .checkText {
    font-size: 18rpx;
    color: #666666;
    display: flex;
    align-items: center;
    margin-top: 26rpx;
  }

  .text_password button {
    color: #FFFFFF;
    width: 590rpx;
    height: 86rpx;
    background: #CDAD66;
    border-radius: 30rpx;
    margin-top: 80rpx;
  }

  .login {
    margin: 40rpx 18rpx 0 0;
    text-align: right;
    font-size: 22rpx;
    color: #666666;
  }
</style>
